<template>
	<!-- <picker
		@change="locationPickerChange"
		@cancel="close"
		:value="provinceIndex"
		:range="provinceList"
		ref="province"
		range-key="name">
		<view class="province-box main-flex" @click="open">
			<slot name="prefix"></slot>
			<view
				v-if="provinceIndex || provinceIndex === 0"
				class="province-text">{{provinceList?.[provinceIndex]?.name}}</view>
			<view v-else class="province-placeholder">请选择</view>
			<slot name="suffix"></slot>
		</view>
	</picker> -->
	<view class="province-box main-flex" @click="open">
		<slot name="prefix"></slot>
		<view
			v-if="provinceIndex || provinceIndex === 0"
			:style="{color}"
			class="province-text">{{provinceList?.[provinceIndex]?.name}}</view>
		<view v-else class="province-placeholder">请选择</view>
		<slot name="suffix"></slot>
		<u-picker
			:show="show"
			:columns="[provinceList]"
			:defaultIndex="[provinceIndex?provinceIndex:0]"
			@close="close"
			@cancel="close"
			@confirm="confirm"
			keyName="name"></u-picker>
	</view>
</template>

<script setup>
  import { computed, onMounted, ref, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { allProvince } from "@/api/app_api/index"
		
		const province = ref(null)
		const props = defineProps({
			modelValue: {
				type: [String, Number],
				default: ''
			},
			color: {
				type: String,
				default: '#333333'
			}
		})
		const emits = defineEmits(['change', 'update:modelValue', 'open', 'close'])
		
  	const provinceList = ref([])
  	const provinceIndex = ref('')
  	// 获取区域
  	const getAllProvince = () => {
  		allProvince().then(res => {
  			provinceList.value = res?.data || []
				if (props.modelValue) {
					const index = provinceList.value.findIndex(item => item.code == props.modelValue)
					provinceIndex.value = index > -1 ? index : ''
				} else {
					openOne()
				}
  		})
  	}
		
		const show = ref(false)
		const open = () => {
			show.value = true
			emits('open')
		}
		const openOne = () => {
			if (!uni.getStorageSync('regionCode')) {
				open()
			}
		}
		
		const close = () => {
			show.value = false
			if (!uni.getStorageSync('regionCode')) {
				emits('change', { code: '500000',name: '重庆市' })
				emits('update:modelValue', '500000')
				uni.setStorageSync('regionCode', '500000')
			}
			emits('close')
		}
		const confirm = (e) => {
			console.log(e)
			emits('change', e.value?.[0] || { code: '500000',name: '重庆市' })
			emits('update:modelValue', e.value?.[0]?.code || '')
			close()
			uni.setStorageSync('regionCode', e.value?.[0]?.code || '')
		}
		
		watch(() => props.modelValue, (nVal, oVal) => {
			if (nVal) {
				const index = provinceList.value.findIndex(item => item.code == nVal)
				provinceIndex.value = index > -1 ? index : ''
			} else {
				openOne()
			}
		}, { immediate: true })
		
		onMounted(() => {
			getAllProvince()
		})
</script>

<style lang="scss" scoped>
  .province-box {
		font-size: 14px;
  	.province-text {
			color: $text-dark;
		}
		.province-placeholder {
			color: $text-dark;
		}
  }
</style>
